<template>
	<view class="cate-wrap">
		<myInput></myInput>
		<view class="con">
			<scroll-view scroll-y="true" class="left">
				<view v-for="(item, index) in cateData" :key="item.cat_id" :class="{ active: currentIndex == index }" @click="currentIndex = index">{{ item.cat_name }}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view class="first" v-for="item in cateData[currentIndex].children">
					<text>{{ item.cat_name }}</text>
					<view class="second">
						<view  v-for="i in item.children" class="">
							<image :src="i.cat_icon" mode=""></image>
							<text>{{ i.cat_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getCate } from '../../request/api.js';
export default {
	data() {
		return {
			cateData: [],
			currentIndex: 0
		};
	},
	methods: {},
	onLoad() {
		getCate().then(res => {
			console.log(res);
			this.cateData = res.message;
		});
	}
};
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
}
.cate-wrap {
	display: flex;
	height: 100%;
	width: 100%;
	flex-direction: column;
}
.con {
	width: 100%;
	display: flex;
	flex: 1;
	overflow: hidden;
	.left {
		width: 30%;
		view {
			height: 80rpx;
			width: 100%;
			line-height: 80rpx;
			text-align: center;
		}
		.active {
			color: red;
		}
	}
	.right{
		.first{
			>text{
				font-size: 20px;
				text-align: center;
				line-height: 40px;
				display: inline-block;
				width: 100%;
			}
			.second{
				display: flex;
				flex-wrap: wrap;
				>view{
					width: 32%;
					image{
						width: 80px;
						height: 80px;
					}
				}
			}
		}
		
		
	}
}
</style>
